<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>note-code</title>
	<style>
		.row {
			background-color: skyblue;
			display: grid;
			grid-template-columns: repeat(12, 1fr);
			/* 手动指定行高看效果 */
			grid-template-rows: 100px;
			grid-auto-rows: 100px;
		}

		.row>div {
			background-color: salmon;
			margin: 10px;
		}

		.col-1 {
			grid-area: auto / auto / auto / span 1;
		}

		.col-2 {
			grid-area: auto / auto / auto / span 2;
		}

		.col-3 {
			grid-area: auto / auto / auto / span 3;
		}

		.col-4 {
			grid-area: auto / auto / auto / span 4;
		}

		.col-5 {
			grid-area: auto / auto / auto / span 5;
		}

		.col-6 {
			grid-area: auto / auto / auto / span 6;
		}

		.col-7 {
			grid-area: auto / auto / auto / span 7;
		}

		.col-8 {
			grid-area: auto / auto / auto / span 8;
		}

		.col-9 {
			grid-area: auto / auto / auto / span 9;
		}

		.col-10 {
			grid-area: auto / auto / auto / span 10;
		}

		.col-11 {
			grid-area: auto / auto / auto / span 11;
		}

		.col-12 {
			grid-area: auto / auto / auto / span 12;
		}
	</style>
</head>

<body>
	<div class="row">
		<div class="col-3">01</div>
		<div class="col-9">02</div>
		<div class="col-4">03</div>
		<div class="col-4">04</div>
		<div class="col-4">05</div>
		<div>06</div>
		<div>07</div>
		<div>08</div>
		<div>09</div>
	</div>
</body>

</html>